<template>
	<view class="container">

		<view class="content">
			<text class="top-tips">营业日</text>
			
			<view class="select-list">
				<view @tap="selectTimeHandle(item)" :class="reportDateType==item.type?'select-check':''"
					class="select-item" v-for="(item,index) in timeList" :key="index">{{item.name}}</view>
			
			</view>
			<view class="top-item" >
			
				<view class="time-num" @tap="startShow=true">
					<text :class="startTime?'timestyle':'timestyled'">{{startTime||'请选择开始时间'}}</text> <u-icon name="arrow-down" color="#d8d8d8" size="20"></u-icon>
				</view>
				<view class="time-center">
					到
				</view>
				<view class="time-num" @tap="endShow=true">
					<text :class="endTime?'timestyle':'timestyled'">{{endTime||'请选择结束时间'}}</text> <u-icon name="arrow-down" color="#d8d8d8" size="20"></u-icon>
				</view>
				<view class="time-btn" @click="searchReport">
					查询
				</view>
			</view>
			

			<view class="conten-center">
				<view class="center-title">
					<view class="title-btn">
						
					</view>
					<text>数据总览</text>
				</view>
				
				<view class="list-conent">
					<view class="list">
						<view class="center-item">
							{{reportData.totalRevenue||0}}
							<text>营收</text>
						</view>
						<view class="center-item">
							{{reportData.revPAR||0}}
							<text>RevPAR</text>
						</view>
						<view class="center-item">
							{{reportData.averageRoomPrice||0}}
							<text>平均房价</text>
						</view>
					</view>
					<view class="list" style="background-color: #FFF7F3; ">
						<view class="center-item">
							{{reportData.occupancyRate?Number(reportData.occupancyRate*100).toFixed(0):0}}%
							<text>入住率</text>
						</view>
						<view class="center-item">
							{{reportData.nightAmount||0}}
							<text>全天房间夜量</text>
						</view>
						<view class="center-item">
							{{reportData.hourlyRoomCount||0}}
							<text>钟点房销量</text>
						</view>
					</view>
					
				</view>
				
			<!-- 	<view class="center-item">
					{{reportData.revPAR?Number(reportData.revPAR):0}}
					<text>RevPAR</text>
				</view>
				<view class="center-item">
					{{reportData.averageRoomPrice||0}}
					<text>平均房价</text>
				</view> -->

			</view>
			<!-- <view class="centent-bottom">
				<text class="centent-title">各房型出租率</text>
				<view class="bottom-item" style="margin-top: 20rpx;"
					v-for="(item,index) in reportData.roomTypeOccupancyRateList" :key="index">
					{{item.roomTypeName}}
					<text>{{item.roomOccupancyRate?Number(item.roomOccupancyRate*100).toFixed(0):0}}%</text>
				</view>

			</view> -->
			
			<view class="conten-center" style="margin-top: 20rpx;">
				<view class="center-title">
					<view class="title-btn">
						
					</view>
					<text>各房型出租情况（已售/剩余）</text>
				</view>
				
				<view class="room-list">
					<view class="room-item" v-for="(item,index) in reportData.roomTypeOccupancyRateList" :key="index">
						<view class="room-top">
							<image :src="getImageSrc(index)" mode=""></image>
							<text class="room-name">{{item.roomTypeName}}</text>
						</view>
						<view class="room-bottom">
							{{item.soldCount}}/{{item.leftCount}}
						</view>
					</view>
				</view>
				
				
			
			</view>



		</view>
		<u-picker :default-time="endTime" @confirm="selectEndTime" v-model="endShow" mode="time"></u-picker>
		<u-picker :default-time="startTime" @confirm="selectStartTime" v-model="startShow" mode="time"></u-picker>

	</view>
</template>

<script>
	import {
		report
	} from '@/api/index.js'
	export default {
		data() {
			return {
				startShow: false, //开始时间
				endShow: false, //结束时间
				reportData: {
					roomTypeOccupancyRateList: [],
				},
				timeList: [{
						name: "昨天",
						type: 1
					},
					{
						name: "本周",
						type: 2
					},
					{
						name: "上周",
						type: 3
					},
					{
						name: "本月",
						type: 4
					},
					{
						name: "上月",
						type: 5
					}
				],
				reportDateType: 1,
				timeShow: false,
				startTime: "",
				endTime: ""
			}
		},
		onShow() {
			this.reportHandle()
		},
		methods: {
			 getImageSrc(index) {
			      const icons = ['icon1', 'icon2', 'icon3', 'icon4'];
			      const iconName = icons[index % icons.length];
			      return `../../static/${iconName}.png`;
			    },
			// 选择结束时间
			selectEndTime(e) {
				this.endTime = e.year + '-' + e.month + '-' + e.day
			},
			// 选择开始时间
			selectStartTime(e) {
				this.startTime = e.year + '-' + e.month + '-' + e.day
			},
			selectTimeHandle(item) {
				this.reportDateType = item.type;
				// 获取今天的日期
				const today = new Date();
				const year = today.getFullYear();
				const month = today.getMonth() + 1;
				const day = today.getDate();

				if (item.name === "昨天") {
					// 设置昨天的时间
					// 获取当前日期
					
					// 计算昨天的日期
					const yesterday = new Date(year, month-1, day );
					
					// 转换为ISO字符串并截断时间部分
					this.startTime = yesterday.toISOString().split('T')[0];
					this.endTime = yesterday.toISOString().split('T')[0];

				} else if (item.name === '本周') {
					// 本周的开始时间（周一）
					const firstDayOfWeek = new Date(year, month - 1, day - ((today.getDay() + 6) % 7) + 1);
					this.startTime = firstDayOfWeek.toISOString().split('T')[0];
					this.endTime = today.toISOString().split('T')[0];
				} else if (item.name === '上周') {
					// 上周的开始时间（上周一）
					const lastWeekStart = new Date(year, month - 1, day - ((today.getDay() + 6) % 7) + 1 - 7);
					this.startTime = lastWeekStart.toISOString().split('T')[0];
					// 上周的结束时间（上周日）
					const lastWeekEnd = new Date(year, month - 1, day - ((today.getDay() + 6) % 7) - 1);
					this.endTime = today.toISOString().split('T')[0];
				} else if (item.name === '本月') {
					// 本月的开始时间（1号）
					const firstDayOfMonth = new Date(year, month - 1, 2);
					this.startTime = firstDayOfMonth.toISOString().split('T')[0];
					this.endTime = today.toISOString().split('T')[0];
				} else if (item.name === '上月') {
				// 获取当前日期
				const today = new Date();
				
				// 将日期设置为上个月的最后一天
				today.setDate(0);
				
				// 上月的结束时间（上个月最后一天）
				const lastMonthEnd = today.toISOString().split('T')[0];
				
				// 获取上个月的天数
				const lastMonthDays = new Date(today.getFullYear(), today.getMonth(), 0).getDate();
				
				// 将日期设置为上个月的第一天
				today.setDate(1);
				
				// 上月的开始时间（上个月1号）
				const lastMonthStart = today.toISOString().split('T')[0];
				
				// 更新实例变量
				this.startTime = lastMonthStart;
				this.endTime = lastMonthEnd;

				}

				// 结束时间不早于开始时间
				const startDate = new Date(this.startTime);
				const endDate = new Date(this.endTime);
				if (endDate < startDate) {
					uni.showToast({
						title: "结束时间不能早于开始时间",
						icon: 'none'
					});
					return false;
				}

				this.reportHandle();
			},


			async searchReport() {
				this.reportDateType = 0
				const res = await report({

					startDate: this.startTime,
					endDate: this.endTime
				})
				this.reportData = res.data
			},
			async reportHandle() {
				const res = await report({
					reportDateType: this.reportDateType,
					// startDate:this.startTime,
					// endDate:this.endTime
				})
				this.reportData = res.data
				// this.reportData=res.data
			},
			gotoRevenue() {
				uni.navigateTo({
					url: '/pages/index/revenue'
				})
			},
			gotoHotelList() {
				uni.navigateTo({
					url: '/pages/hotelsList/hotelsList'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		background-color: #f7f7f7;
		min-height: 100vh;
		
	}

	.top {
		height: 120rpx;
		background: #FFFFFF;
		padding: 0 20rpx;
		display: flex;
		align-items: center;
		font-family: Source Han Sans SC;
		font-weight: 500;
		font-size: 40rpx;
		color: #000;
		font-weight: bold;

	}

	.check-btn {
		margin-left: 20rpx;
		width: 164rpx;
		height: 80rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 6rpx 12rpx rgba(93, 95, 238, 0.12);
		border-radius: 20rpx;
		text-align: center;
		line-height: 80rpx;
		color: #1296db;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
	}

	.content {
		padding: 24rpx;
		// padding-top: 40rpx;
		box-sizing: border-box;
	}
	
	.top-tips{
		font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
		font-weight: 700;
		font-size: 34rpx;
		color: #020202;
	}
	
	.select-list {
		margin-top: 20rpx;
		display: flex;
		justify-content: space-between;
	
		.select-item {
			// font-size: 12rpx;
			width: 120rpx;
			height: 56rpx;
			background: #FFFFFF;
			line-height: 56rpx;
			text-align: center;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #020202;
		}
	
		
	
		.select-check {
			background-color: #066AFB;
			color: #FFFFFF;
		}
	}
	
	.top-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 20rpx;
		.select-text {
			color: #1296db;
			font-size: 30rpx;
			margin-left: 20rpx;
		}
	
		.time-num {
			width: 256rpx;
			height: 64rpx;
			background: #FFFFFF;
			border-radius: 6rpx 6rpx 6rpx 6rpx;
			border: 2rpx solid #EEEEEE;
			display: flex;
			align-items: center;
			padding:0 12rpx;
			box-sizing: border-box;
			line-height: 64rpx;
			text-align: center;
			font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #1A1A1A;
	
		}
		.timestyle{
			flex: 1;
			color: #1A1A1A;
		}
		
		.timestyled{
			
			color: #8A8A8A;
			flex: 1;
		}
	
		.time-btn {
			width: 120rpx;
			height: 64rpx;
			background: #0868FA;
			border-radius: 6rpx 6rpx 6rpx 6rpx;
			line-height: 64rpx;
			text-align: center;
			font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #FFFFFF;
		}
	
		.time-center {
		
			font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
			font-weight: 400;
			font-size: 28rpx;
		}
	}

	.content-top {

		background-color: #FFFFFF;
		border-radius: 10rpx;
		padding: 10rpx;

		.top-tips {
			font-family: Alibaba PuHuiTi 2.0;
			font-size: 36rpx;
			color: #000;
			font-weight: 500;
		}

		

		
	}

	.conten-center {
		width: 702rpx;
		// height: 368rpx;
		background: #FFFFFF;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		margin-top: 32rpx;
		padding: 24rpx 0;
		
		.center-title{
			display: flex;
			align-items: center;
			
			.title-btn{
				width: 8rpx;
				height: 32rpx;
				background: #0868FA;
			}
			
			text{
				font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
				font-weight: 700;
				font-size: 34rpx;
				color: #3D3D3D;
				margin-left: 12rpx;
			}
		}
		
		.list-conent{
			padding:0 24rpx;
			box-sizing: border-box;
			
			.list{
				margin-top: 24rpx;
				display: flex;
				align-items: center;
				height: 116rpx;
				background: #F0F6FF;
				
				.center-item {
					
					width: 33.3%;
					font-family: Source Han Sans SC;
					font-weight: 500;
					font-size: 36rpx;
					color: #000;
					display: flex;
					flex-direction: column;
					height: 100%;
					align-items: center;
					justify-content: center;
					font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
					font-weight: 700;
					font-size: 34rpx;
					color: #3D3D3D;
				
					text {
						font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #8A8A8A;
					}
				}
			}
		}
		
		.room-list{
			padding: 0 24rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			
			.room-item{
				margin-top: 20rpx;
				width: 318rpx;
				height: 116rpx;
				background: #F6F5F8;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				padding-top: 20rpx;
				padding-left: 32rpx;
				box-sizing: border-box;
				.room-top{
					display: flex;
					align-items: center;
					image{
						width: 24rpx;
						height: 24rpx;
					}
					.room-name{
						margin-left: 12rpx;
						font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #8A8A8A;
					}
				}
				
				.room-bottom{
					margin-left: 36rpx;
					margin-top: 8rpx;
					font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
					font-weight: 700;
					font-size: 34rpx;
					color: #3D3D3D;
				}
			}
		}

		
	}

	.centent-bottom {
		margin-top: 20rpx;
		display: flex;
		flex-direction: column;
		padding: 30rpx;
		color: #000;
		box-sizing: border-box;
		font-family: Alibaba PuHuiTi 2.0;
		font-size: 28rpx;
		font-weight: 300;
		background-color: #FFFFFF;
		border-radius: 10rpx;

		.centent-title {
			font-family: Alibaba PuHuiTi 2.0;
			font-size: 36rpx;
			font-weight: 500;
		}

		.bottom-item {
			display: flex;
			align-items: center;

			text {
				margin-left: 20rpx;
			}
		}
	}

	.list {
		margin-top: 40rpx;
		display: flex;
		flex-wrap: wrap;

		.item {
			display: flex;
			flex-direction: column;
			align-items: center;

			image {
				width: 200rpx;
				height: 200rpx;
			}

			text {
				margin-top: 10rpx;
				color: #1296db;
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
			}

		}

		.item:nth-child(n+2) {
			margin-left: 20rpx;
		}
	}
</style>